<template>
	<view class="index">
		<uni-section title="我的订单" type="line">
		</uni-section>

		<view class="order">
			<view class="title">产品服务订单</view>
			<view class="orderData">
				<view class="followItem" @click="toOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='orderObj?.waitPayCount' absolute="rightTop">
							<image src="@/static/img/order/dfk.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待付款</view>
				</view>
				<view class="followItem" @click="toOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='orderObj?.waitSendCount' absolute="rightTop">
							<image src="@/static/img/my/state_ship_0.png" style="width: 48rpx;height: 48rpx;">
							</image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待发货</view>
				</view>
				<view class="followItem" @click="toOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='orderObj?.waitReceiveCount' absolute="rightTop">
							<image src="@/static/img/order/dsh.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待收货
					</view>
				</view>
				<!-- <view class="followItem" @click="toOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='0' absolute="rightTop">
							<image src="@/static/img/order/ywc.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">已完成</view>
				</view> -->

				<view class="followItem" @click="toOrderAfterSale">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='0' absolute="rightTop">
							<image src="@/static/img/order/after_sale.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">退款售后</view>
				</view>

			</view>
		</view>

		<view class="order">
			<view class="title">需求订单</view>
			<view class="orderData">
				<view class="followItem" @click="toVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='vpsOrderCount?.waitPayCount' absolute="rightTop">
							<image src="@/static/img/order/dfk.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待付款</view>
				</view>
				<view class="followItem" @click="toVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='vpsOrderCount?.waitCompleteCount' absolute="rightTop">
							<image src="@/static/img/order/dsh.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待完成
					</view>
				</view>
				<view class="followItem" @click="toVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='vpsOrderCount?.waitConfirmCount' absolute="rightTop">
							<image src="@/static/img/my/state_confirm_0.png" style="width: 48rpx;height: 48rpx;">
							</image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待确认</view>
				</view>
				<view class="followItem" @click="toVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='0' absolute="rightTop">
							<image src="@/static/img/order/ywc.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">已完成</view>
				</view>
			</view>
		</view>

		<view class="order">
			<view class="title">兼职订单</view>
			<view class="orderData">
				<view class="followItem" @click="toWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='workOrderCount?.waitPayCount' absolute="rightTop">
							<image src="@/static/img/order/dfk.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待付款</view>
				</view>
				<view class="followItem" @click="toWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='workOrderCount?.waitCompleteCount' absolute="rightTop">
							<image src="@/static/img/order/dsh.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待完成
					</view>
				</view>
				<view class="followItem" @click="toWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='workOrderCount?.waitConfirmCount' absolute="rightTop">
							<image src="@/static/img/my/state_human_0.png" style="width: 48rpx;height: 48rpx;">
							</image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待确认</view>
				</view>
				<view class="followItem" @click="toWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='0' absolute="rightTop">
							<image src="@/static/img/order/ywc.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">已完成</view>
				</view>
			</view>
		</view>

		<uni-section class="mb-10" title="商家订单" sub-title="">
			<template v-slot:decoration>
				<view class="decoration"></view>
			</template>
		</uni-section>

		<view class="order">
			<view class="title">产品服务订单</view>
			<view class="orderData">
				<view class="followItem" @tap="navTo('/pages/orderList/index?state=WAIT_PAY')">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeOrderObj?.waitPayCount' absolute="rightTop">
							<image src="@/static/img/order/dfk.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待付款</view>
				</view>
				<view class="followItem" @tap="navTo('/pages/orderList/index?state=WAIT_SEND')">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeOrderObj?.waitDeliverCount' absolute="rightTop">
							<image src="@/static/img/order/shipped.png" style="width: 48rpx;height: 48rpx;">
							</image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待发货</view>
				</view>
				<view class="followItem" @tap="navTo('/pages/evaluationManagement/index')">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeOrderObj?.commentCount' absolute="rightTop">
							<image src="@/static/img/order/evaluate.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">评价
					</view>
				</view>
				<view class="followItem" @tap="navTo('/pages/sellerAfterSalesList/index')">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeOrderObj?.refundCount' absolute="rightTop">
							<image src="@/static/img/order/after_sale.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">退货/售后</view>
				</view>
			</view>
		</view>

		<!-- <view class="botTop_2">
	 	<view class="botTop_2_view" @tap="navTo('/pages/orderList/index?state=WAIT_PAY')">
	 		<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.waitPayCount}}</text>
	 		<text class="botTop_2_view_text1">待付款</text>
	 	</view>
	 	<view class="botTop_2_view" @tap="navTo('/pages/orderList/index?state=WAIT_SEND')">
	 		<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.waitDeliverCount}}</text>
	 		<text class="botTop_2_view_text1">待发货</text>
	 	</view>
	 	<view class="botTop_2_view" @tap="navTo('/pages/evaluationManagement/index')">
	 		<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.commentCount}}</text>
	 		<text class="botTop_2_view_text1">评价</text>
	 	</view>
	 	<view class="botTop_2_view" @tap="navTo('/pages/sellerAfterSalesList/index')">
	 		<text class="botTop_2_view_text">{{data.shopDetails.orderStatics.refundCount}}</text>
	 		<text class="botTop_2_view_text1">退货/售后</text>
	 	</view>
	 </view> -->

		<view class="order">
			<view class="title">需求订单</view>
			<view class="orderData">
				<view class="followItem" @click="toStoreVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeVpsOrderCount?.waitPayCount' absolute="rightTop">
							<image src="@/static/img/order/dfk.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待付款</view>
				</view>
				<view class="followItem" @click="toStoreVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeVpsOrderCount?.waitCompleteCount' absolute="rightTop">
							<image src="@/static/img/order/dsh.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待完成
					</view>
				</view>
				<view class="followItem" @click="toStoreVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeVpsOrderCount?.waitConfirmCount' absolute="rightTop">
							<image src="@/static/img/my/state_confirm_0.png" style="width: 48rpx;height: 48rpx;">
							</image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待确认</view>
				</view>
				<view class="followItem" @click="toStoreVpsOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeVpsOrderCount?.completeCount' absolute="rightTop">
							<image src="@/static/img/order/ywc.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">已完成</view>
				</view>
			</view>
		</view>

		<view class="order">
			<view class="title">兼职订单</view>
			<view class="orderData">
				<view class="followItem" @click="toStoreWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeWorkOrderCount?.waitPayCount' absolute="rightTop">
							<image src="@/static/img/order/dfk.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待付款</view>
				</view>
				<view class="followItem" @click="toStoreWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeWorkOrderCount?.waitCompleteCount' absolute="rightTop">
							<image src="@/static/img/order/dsh.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待完成
					</view>
				</view>
				<view class="followItem" @click="toStoreWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin" :text='storeWorkOrderCount?.waitConfirmCount' absolute="rightTop">
							<image src="@/static/img/my/state_human_0.png" style="width: 48rpx;height: 48rpx;">
							</image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">待确认</view>
				</view>
				<view class="followItem" @click="toStoreWorkOrder">
					<view class="imgDxs">
						<uni-badge class="uni-badge-left-margin"  :text='storeWorkOrderCount?.completeCount' absolute="rightTop">
							<image src="@/static/img/order/ywc.png" style="width: 48rpx;height: 48rpx;"></image>
						</uni-badge>
					</view>
					<view style="color: #8C8C8C;font-size: 24rpx;text-align: center;margin-top: 6rpx;">已完成</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { userOrderStatics, queryVpsOrderCount, queryWorkOrderCount, loginCheck,storeOrderStatics } from '@/utils/api/userInfo.ts'
	import { myStoreDetail, verifyOrder } from '@/utils/api/shop'
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from "vue"

	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}

	const toOrder = () => {
		uni.navigateTo({
			url: '/pages/life/index?type=1'
		})
	}
	const toOrderAfterSale = () => {
		uni.navigateTo({
			url: '/pages/sellerAfterSalesList/index?type=2'
		})
	}

	const toStoreOrderAfterSale = () => {
		uni.navigateTo({
			url: '/pages/sellerAfterSalesList/index?type=1'
		})
	}

	const toVpsOrder = () => {
		uni.navigateTo({
			url: '/pages/demandOrder/index'
		})
	}

	const toWorkOrder = () => {
		uni.navigateTo({
			url: '/pages/myParttimeJob/myParttimeJob'
		})
	}


	const orderObj = ref({})
	function loadOrderObj() {
		userOrderStatics().then(res => {
			orderObj.value = res.data
		})
	}

	const vpsOrderCount = ref({})
	const loadVpsOrderCount = async () => {
		queryVpsOrderCount().then(res => {
			vpsOrderCount.value = res.data
		})
	}
	const workOrderCount = ref({})
	const loadWorkOrderCount = async () => {
		queryWorkOrderCount().then(res => {
			workOrderCount.value = res.data
		})
	}

	//商家
	const toStoreOrder = () => {
		uni.navigateTo({
			url: '/pages/orderList/index'
		})
	}

	const toStoreVpsOrder = () => {
		uni.navigateTo({
			url: '/pages/myNeeds/index'
		})
	}

	const toStoreWorkOrder = () => {
		uni.navigateTo({
			url: '/pages/myParttimeJob/myParttimeJob'
		})
	}

	const storeOrderObj = ref({})
	function loadStoreOrderObj() {
		queryStoreOrderCount().then(res => {
			storeOrderObj.value = res.data
		})
	}

	const storeVpsOrderCount = ref({})
	const loadStoreVpsOrderCount = async () => {
		queryStoreVpsOrderCount().then(res => {
			storeVpsOrderCount.value = res.data
		})
	}
	const storeWorkOrderCount = ref({})
	const loadStoreWorkOrderCount = async () => {
		queryStoreWorkOrderCount().then(res => {
			storeWorkOrderCount.value = res.data
		})
	}
	onShow(() => {
		loginCheck().then(res => {
			loadOrderObj()
			loadVpsOrderCount()
			loadWorkOrderCount()

			loadStoreOrderObj()
			loadStoreVpsOrderCount()
			loadStoreWorkOrderCount()
		})
	})
	storeOrderStatics().then((res)=>{
		storeOrderObj.value = res.data.lifeOrderStatics;
		storeVpsOrderCount.value = res.data.vpsOrderCount;
		storeWorkOrderCount.value = res.data.workOrderCount;
	})
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;
		background-color: #f4f6fa;
		position: relative;

		.topbar {
			width: 100%;
			height: 744rpx;
			// background-image: url("@/static/img/purseBg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.balance {
				padding: 26rpx 32rpx 0;

				.balanceBox {
					height: 550rpx;
					background-color: #fff;
					// box-shadow: 0rpx 12rpx 36rpx 0rpx rgba(238, 239, 241, 0.8);
					border-radius: 24rpx;
					padding: 36rpx 0 40rpx;

					.balanceTitle {
						height: 45rpx;
						font-size: 32rpx;
						font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
						color: #444444;
						text-align: center;
						line-height: 45rpx;
					}

					.amount {
						height: 109rpx;
						font-family: D-DIN-DIN, D-DIN-DIN;
						font-weight: bold;
						font-size: 100rpx;
						color: #111111;
						text-align: center;
						margin: 16rpx 0 64rpx;
					}

					.balanceBtn {
						height: 88rpx;
						padding: 0 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.balanceBtnItem {
							width: 265rpx;
							height: 88rpx;
							border-radius: 264rpx 264rpx 264rpx 264rpx;
							font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
							font-size: 32rpx;
							color: #6b64d3;
						}

						.withdraw {
							background: #e4e2fc;
						}

						.recharge {
							background: #6b64d3;
							color: #fff;
						}
					}

					.currency {
						height: 120rpx;
						padding: 32rpx 48rpx 0rpx;
						margin-top: 32rpx;
						border-top: 1rpx solid #ebebeb;
						display: flex;
						align-items: center;

						.currencyItem {
							width: 197rpx;
							height: 88rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.title {
								font-size: 24rpx;
								color: #999999;
								font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
							}

							.number {
								font-size: 32rpx;
								color: #262626;
							}
						}

						.points {
							width: 195rpx;
						}

						.borderBox {
							width: 2rpx;
							height: 48rpx;
							background-color: #e6e6e6;
						}
					}
				}
			}
		}

		.order {
			margin: 12rpx 24rpx;
			width: 702rpx;
			height: 170rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.title {
				padding: 10rpx 0 30rpx 44rpx;
			}

			.orderData {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-self: center;
				position: relative;
				z-index: 20;

				.titleAlign {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}

				.imgDxs {
					width: 48rpx;
					height: 48rpx;
					width: 100%;
					text-align: center;
				}

				.followItem {
					justify-content: center;
					align-self: center;
					width: 30vw;
				}
			}
		}

		.order1 {
			margin: 12rpx 24rpx;
			width: 702rpx;
			height: 170rpx;
			background: #b3e6ff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.title {
				padding: 10rpx 0 30rpx 44rpx;
			}

			.orderData {
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-self: center;
				position: relative;
				z-index: 20;

				.titleAlign {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}

				.imgDxs {
					width: 48rpx;
					height: 48rpx;
					width: 100%;
					text-align: center;
				}

				.followItem {
					justify-content: center;
					align-self: center;
					width: 30vw;
				}
			}
		}
	}

	$uni-success: #18bc37 !default;

	.mb-10 {
		margin-bottom: 10px;
	}

	.decoration {
		width: 6px;
		height: 6px;
		margin-right: 4px;
		border-radius: 50%;
		background-color: $uni-success;
	}
</style>